<template>
	<view>
		<!-- 头部导航栏 -->
		<view class="" style="width: 100%;margin: auto;background-color: #fff;padding-top: 20rpx;">

			<van-row>
				<van-col span="8" style="text-align: center;">
					<view class="" @click="applyIdClick" style="width: 100rpx;margin: auto;">
						<van-image width="100rpx" height="90rpx"
							src="cloud://cu4oral6-9g3l2orjbb347b4c.6375-cu4oral6-9g3l2orjbb347b4c-1307874055/上报请假-01.png" />
						<text style="font-size: 24rpx;">加入群组</text>
					</view>
					<!-- <text>加入群组</text> -->
				</van-col>
				<van-col span="8" style="text-align: center;">
					<view class="" @click="addClick" style="width: 100rpx;margin: auto;">
						<van-image width="100rpx" height="90rpx"
							src="cloud://cu4oral6-9g3l2orjbb347b4c.6375-cu4oral6-9g3l2orjbb347b4c-1307874055/增加年级-01 (1).png" />
						<text style="font-size: 24rpx;">新建群组</text>
					</view>
					<!-- <text @click="addClick">新建群组</text> -->
				</van-col>
				<van-col span="8" style="text-align: center;">
					
					
					<view class="" @click="applyClick" style="width: 100rpx;margin: auto;">
						<van-image v-if="searchShow" width="100rpx" height="90rpx"
							src="cloud://cu4oral6-9g3l2orjbb347b4c.6375-cu4oral6-9g3l2orjbb347b4c-1307874055/37search.png" />
						<van-image v-else width="100rpx" height="90rpx"
							src="cloud://cu4oral6-9g3l2orjbb347b4c.6375-cu4oral6-9g3l2orjbb347b4c-1307874055/班级管理-01 (1).png" />
						<text v-if="searchShow" style="font-size: 24rpx;">查找群组</text>
						<text v-else style="font-size: 24rpx;">新建签到</text>
					</view>
					<!-- <text @click="addClick">新建群组</text> -->
				</van-col>
			</van-row>
			<!-- 搜索框 -->
			<van-search v-if="!searchShow" @change="onChangeSearch" @search="onSearch1" :value="searchGroup" placeholder="请输入已加入群组名称前缀关键词" />
			<van-search v-else @change="onChangeSearch" @search="onSearch" :value="searchGroup" placeholder="请输入要查找群组名称前缀关键词" />
		</view>
		<!-- <view class="" style="width: 95%;margin: auto;">
			<van-button plain hairline type="info" icon="add-o" @click="addClick" class="addClick">新建群组</van-button>
		</view> -->


		<!-- 群组管理 -->
		<view v-if="!searchShow">
			<van-notice-bar
			  left-icon="volume-o"
			  text="左滑可以解散群组"
			/>
		</view>
		<view class="" v-if="!searchShow" v-for="(item,index) in list"
			style=" width: 95%; margin: auto;margin-top: 40rpx;">
			<view class="cellview">
				<van-swipe-cell right-width=" 65 ">
					<!-- <view slot="left" class="van-swipe-cell__left">选择</view> -->
					<van-cell-group>
						<van-cell link-type="navigateTo" :url="'/pages/editTeam/editTeam?groupId='+item.groupId+'&groupName='+item.groupEnt.groupName+'&role='+item.role"
							:title="item.groupEnt.groupName" is-link :value="item.role=='MASTER'?'管理员':'普通用户'"
							:label="item.groupEnt.creatTime" size="large"
							 title-class="cell-title"
							 label-class="cell-label"
							icon="cloud://cu4oral6-9g3l2orjbb347b4c.6375-cu4oral6-9g3l2orjbb347b4c-1307874055/群组.png" />
					</van-cell-group>
					<view slot="right" :data-groupId="item.groupId" v-if="item.role=='MASTER'"
						class="van-swipe-cell__right" @click="deleteGroup">解散</view>
					<view slot="right" v-else class="van-swipe-cell__right1">解散</view>
				</van-swipe-cell>
			</view>
		</view>


		<!-- 搜索到的群组 -->
		<!-- <view class="" v-if="!searchList||searchList.length == 0 && searchShow"> -->
		<view v-if="searchShow">
			<van-notice-bar
			  left-icon="volume-o"
			  text="请在搜索框查找要加入的群组。"
			/>
		</view>
		<view class="" v-if="searchShow" v-for="(item,index) in searchList"
			style=" width: 95%; margin: auto;margin-top: 40rpx;">
			<view class="cellview">
				<van-cell-group>
					<van-cell @click="applySearch(item.id)"
						:title="item.groupName" is-link :value="'群号：'+item.id" :label="item.creatTime" size="large"
						icon="cloud://cu4oral6-9g3l2orjbb347b4c.6375-cu4oral6-9g3l2orjbb347b4c-1307874055/群组.png" />
				</van-cell-group>
			</view>
		</view>
		
		

		<!-- 加入群组 -->
		<van-dialog use-slot  title="申请加群" :show="showApply" show-cancel-button
			@cancel="onCancel" @confirm="apply">
			<van-cell-group>
				<van-field label="群组编号" :value="applyId" placeholder="请输入群组Id" @change="onChangeId" maxlength="20"
					custom-style="border:2rpx solid #969799;width:95%;margin:auto;border-radius:10rpx;" />
				<van-field
					@change="onChangeMessage"
				    :value="message"
				    label="留言"
				    type="textarea"
				    placeholder="留言内容(可选)"
				    autosize
				    border="false"
					custom-style="border-left:2rpx solid #969799;border-right:2rpx solid #969799;width:95%;margin:auto;border-radius:10rpx;"
				  />
				  <van-field label="留名" :value="applyName" placeholder="如:菏泽学院张三(可选)" @change="onChangeApplyName" maxlength="20"
				  	custom-style="border:2rpx solid #969799;width:95%;margin:auto;border-radius:10rpx;" />
			</van-cell-group>
		</van-dialog>

		<!-- 创建群组 -->
		<van-dialog use-slot title="群组名称" :show="show" show-cancel-button @confirm="onConfirm" @cancel="onCancel">
			<van-cell-group>
				<van-field :value="value" placeholder="限20个字" @change="onChange" maxlength="20"
					custom-style="border:2rpx solid #969799;width:95%;margin:auto;border-radius:10rpx;" />
			</van-cell-group>
		</van-dialog>
		<!-- 删除确认 -->
		<van-dialog id="van-dialog" />
		<!-- 轻提示 -->
		<van-toast id="van-toast" />
	</view>
</template>

<script>
	import wrap from '@/components/wrap';
	import Dialog from '../../wxcomponents/vant/dialog/dialog';
	import Toast from '../../wxcomponents/vant/toast/toast';
	export default {
		data() {
			return {
				show: false,
				value: "",
				list: null,
				searchGroup: "",
				searchList: [],
				searchShow: false,
				showApply:false,
				applyId:"",
				message:"",
				applyName:""
			}
		},
		methods: {
			//加入搜索到的群聊
			applySearch(i){
				this.applyIdClick();
				this.applyId = i;
			},
			//群组Id
			onChangeId(event){
				this.applyId = event.detail
			},
			onChangeMessage(event){
				this.message = event.detail
			},
			onChangeApplyName(event){
				this.applyName = event.detail
			},
			//通过ID加入群组
			applyIdClick(){
				this.showApply = true;
			},
			// 申请加群
			apply() {
				uni.request({
					url: this.apiurl + '/user_join/request',
					method:"POST",
					data: {
						"aimGroup":this.applyId,
						"leaveName":this.applyName,
						"message":this.message
					},
					header: {
						'Authorization': uni.getStorageSync("token")
					},
					success: (res) => {
						console.log(res.data);
						if(res.data.data == "WAITING")
						Toast.success('申请成功，请等待管理员审核');
						else
						Toast.fail(res.data.message)
					}
				});
				this.showApply = false;
			},
			//查找群组
			applyClick() {
				// this.searchShow = !this.searchShow;
				if(!this.searchShow)
				uni.navigateTo({
					url: '/pages/addSign/addSign'
				});
				this.searchGroup = ""
			},
			//搜索栏伪绑定
			onChangeSearch(event) {
				console.log(event)
				this.searchGroup = event.detail
			},
			//查找群组
			onSearch() {
				uni.request({
					url: this.apiurl + '/group/prefix_name',
					data: {
						prefix: this.searchGroup,
						pageNum: 1,
						pageSize: 20
					},
					header: {
						'Authorization': uni.getStorageSync("token")
					},
					success: (res) => {
						console.log(res.data);
						this.searchList = res.data.list
						this.searchShow = true;
						
						if(this.searchList.length == 0){
							uni.showModal({
							    title: '提示',
							    content: '没有找到群组，请确定您输入正确',
							    success: function (res) {
							        if (res.confirm) {
							            console.log('用户点击确定');
							        } else if (res.cancel) {
							            console.log('用户点击取消');
							        }
							    }
							});
						}
					}
				});
			},
			onSearch1() {
				uni.request({
					url: this.apiurl + '/group/prefix_about_user',
					data: {
						prefix: this.searchGroup,
						pageNum: 1,
						pageSize: 20
					},
					header: {
						'Authorization': uni.getStorageSync("token")
					},
					success: (res) => {
						console.log(res.data);
						
						if(res.data.list == 0){
							uni.showModal({
							    title: '提示',
							    content: '没有找到群组，如果想加入此群请点击左上角我的群组再进行查找',
							    success: function (res) {
							        if (res.confirm) {
							            console.log('用户点击确定');
							        } else if (res.cancel) {
							            console.log('用户点击取消');
							        }
							    }
							});
						}else{
							this.list = res.data.list
						}
						
					}
				});
			},
			onChange(event) {
				this.value = event.detail;
			},
			//dialog取消按钮
			onCancel() {
				this.show = false;
				this.showApply = false;
			},
			//dialog确认按钮
			onConfirm() {
				console.log(this.value);
				this.show = false;
				this.addCommon();
				this.user_in_group();
			},
			//新建群组按钮
			addClick() {
				this.show = true;
			},
			//创建群组
			addCommon() {
				uni.request({
					url: this.apiurl + '/group/group',
					method: 'POST',
					data: {
						groupName: this.value
					},
					header: {
						'Authorization': uni.getStorageSync("token") //自定义请求头信息
					},
					success: (res) => {
						console.log(res.data);
						Toast.success('创建成功');
						this.user_in_group()
					}
				});
			},
			//解散群组
			deleteGroup(event) {
				console.log(event)
				Dialog.confirm({
						title: '删除',
						message: '是否删除群组',
					})
					.then(() => {
						// on confirm
						uni.request({
							url: this.apiurl + '/group/group',
							method: "DELETE",
							data: {
								"id": event.target.dataset.groupid
							},
							header: {
								'Authorization': uni.getStorageSync("token")
							},
							success: (res) => {
								if (res.data.status == 1) {
									Toast.success('删除成功');
									this.user_in_group()
								} else {
									alert("系统异常")
								}

							}
						});

					})
					.catch(() => {
						// on cancel
					});

			},
			//查询已加入的群组
			user_in_group() {
				uni.request({
					url: this.apiurl + '/group/user_in_group',
					data: {
						pageNum: 1,
						pageSize: 20
					},
					header: {
						'Authorization': uni.getStorageSync("token")
					},
					success: (res) => {
						console.log(res.data);
						this.list = res.data.list
					}
				});
			},
			// editTeam(id){
			// 	uni.navigateTo({
			// 		url:"../editTeam/editTeam?groupId="+id
			// 	})
			// }

		},
		onShow() {
			this.checkLogin();
			this.user_in_group();
			this.searchShow = false;
			// this.aginLogin();

		},
		components: {
			wrap,
		},
		created() {
			this.user_in_group()
		}
	}
</script>

<style>
	.addClick button {
		width: 100%;
		margin: auto;
		margin-top: 40rpx;
	}

	.van-swipe-cell {
		width: 95%;
		margin: auto;
	}

	.demo-swipe-cell {
		user-select: none;
	}

	.van-cell__title {
		color: #55aaff;
	}

	.van-swipe-cell__left,
	.van-swipe-cell__right {
		display: inline-block;
		width: 130rpx;
		height: 127rpx;
		font-size: 30rpx;
		line-height: 127rpx !important;
		color: #fff;
		text-align: center;
		background-color: #f66;
	}

	.van-swipe-cell__right1 {
		display: inline-block;
		width: 130rpx;
		height: 127rpx;
		font-size: 30rpx;
		line-height: 127rpx !important;
		color: #fff;
		text-align: center;
		background-color: #b70b0b;
	}

	.image-class {
		margin: auto;
	}
	
	.cell-title{
		 
		   white-space: nowrap;
		   overflow: hidden;
		   text-overflow: ellipsis;
	}
	
	.cell-label{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
